<template>
  <view class="p-page">
    <view
      class="page-box-t-overflow page-box-x-overflow"
      :style="{ marginBottom: '-12px' }"
    >
      <u-swiper
        :list="[
          'https://www.12306.cn/index/images/pic/banner11.jpg',
          'https://www.12306.cn/index/images/pic/banner12.jpg',
        ]"
        :radius="0"
        :height="200"
        :circular="true"
      ></u-swiper>
    </view>

    <view class="page-box py-base px-lg relative">
      <view>
        <u-text type="primary" :size="18" :bold="true" text="火车票"></u-text>
      </view>

      <view class="mt-base py-base">
        <!-- flex 布局总是会因为左右字符长度不同导致中心偏移，因此采用 row 布局 -->
        <u-row>
          <u-col :span="5">
            <view @tap="handleSelectStation('from')">
              <u-text
                :type="from ? undefined : 'info'"
                :size="20"
                :bold="true"
                align="left"
                :text="from || '请选择'"
              ></u-text>
            </view>
          </u-col>
          <u-col :span="2">
            <view class="u-flex-x-center">
              <u-icon name="arrow-right-double" :size="22"></u-icon>
            </view>
          </u-col>
          <u-col :span="5">
            <view @tap="handleSelectStation('to')">
              <u-text
                :type="to ? undefined : 'info'"
                :size="20"
                :bold="true"
                align="right"
                :text="to || '请选择'"
              ></u-text>
            </view>
          </u-col>
        </u-row>
      </view>
      <u-line></u-line>
      <!-- uLine 颜色比较浅 -->

      <view class="py-base">
        <view class="u-flex-y-center" @tap="showStationDate = true">
          <!-- 直接在 uText 上写的样式可能会在页面更新时被莫名的 bug 覆盖，因此要养成“间距”类样写在 view 标签上的好习惯-->
          <view :style="{ flexGrow: 0, whiteSpace: 'nowrap' }">
            <u-text :size="20" :text="$u.timeFormat(date, 'M月D日')"></u-text>
          </view>
          <view :style="{ flexGrow: 1, marginLeft: '0.6em' }">
            <u-text
              type="info"
              :text="
                $u.dayjs(date).isToday()
                  ? '今天'
                  : $u.timeFormat(date, '[周]dd')
              "
            ></u-text>
          </view>
        </view>
      </view>
      <u-line></u-line>

      <u-calendar
        :show="showStationDate"
        :min-date="$u.dayjs().format()"
        :max-date="$u.dayjs().add(14, 'day').format()"
        @confirm="handledateConfirm"
        @close="showStationDate = false"
      ></u-calendar>

      <view class="mt-base">
        <u-button
          type="primary"
          :disabled="!from || !to"
          @tap="handleToQueryTrain"
          >查询车票</u-button
        >
      </view>
    </view>

    <!--
    <view class="page-box">
      <u-grid :border="false" :col="5">
        <u-grid-item v-for="item in HOME_MENU" :key="item.label">
          <view class="grid-item">
            <u-image :src="item.image" width="30px" height="30px"></u-image>
            <view class="grid-item-text">{{ item.label }}</view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    -->

    <!--
    <view class="page-box p-base u-flex-y-center">
      <u-image
        src="@/static/ic_hot_news.png"
        :width="40"
        :height="40"
        mode="scaleToFill"
        class="u-flex-shrink-0"
      ></u-image>
      <view class="ms-lg u-flex-fill">
        <u-text
          text="中铁快运创新退出跨域当日达"
          :size="14"
          :bold="true"
        ></u-text>
        <u-text
          text='"高铁急送"城市群内4小时，城市群间8小时送达！'
          :size="14"
        ></u-text>
      </view>
      <view class="u-flex-shrink-0 u-flex-y-center">
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    -->

    <!--
    <view class="page-box overflow-hidden">
      <u-image
        src="https://www.12306.cn/index/images/abanner01.jpg"
        mode="widthFix"
        height="auto"
        width="100%"
      ></u-image>
    </view>
    <view class="page-box overflow-hidden">
      <u-image
        src="https://www.12306.cn/index/images/abanner05.jpg"
        mode="widthFix"
        height="auto"
        width="100%"
      ></u-image>
    </view>
    -->
  </view>
</template>

<script>
import { mapState } from "vuex";
import uNavbarOpacity from "@/utils/mixins/u-navbar-opacity";

const HOME_MENU = [
  { label: "车站大屏", image: require("@/static/home_daping.png") },
  { label: "计次·定期票", image: require("@/static/home_jicipiao.png") },
  { label: "铁路e卡通", image: require("@/static/home_ekatong.png") },
  { label: "时刻表", image: require("@/static/home_liechezhuangtai.png") },
  { label: "温馨服务", image: require("@/static/home_wenxinfuwu.png") },
  { label: "空铁联运", image: require("@/static/home_kongtie.png") },
  { label: "敬老版", image: require("@/static/home_aixin.png") },
  { label: "酒店住宿", image: require("@/static/home_jiudian.png") },
  { label: "约车", image: require("@/static/home_yueche.png") },
  { label: "门票·旅游", image: require("@/static/home_trip.png") },
  { label: "餐饮·特产", image: require("@/static/home_canyin.png") },
  { label: "汽车票", image: require("@/static/home_qichepiao.png") },
  { label: "铁路商城", image: require("@/static/home_shangcheng.png") },
  {
    label: "中铁畅行卡",
    image: require("@/static/home_zhongtiechangxingka.png"),
  },
  { label: "出行保险", image: require("@/static/home_chengyixian.png") },
];

export default {
  mixins: [uNavbarOpacity],
  data() {
    return {
      from: "",
      to: "",
      showStationDate: false,
      date: new Date(),
      HOME_MENU,
      searchInput: "",
    };
  },
  computed: {
    ...mapState({ stations: "stations" }),
  },
  methods: {
    handleSelectStation(key) {
      uni.navigateTo({
        url: `/pages/SelectStationView/SelectStationView?key=${key}`,
      });
    },
    handledateConfirm(e) {
      this.date = this.$u.dayjs(e[0]).startOf("date").format();
      this.showStationDate = false;
    },
    handleToQueryTrain() {
      uni.navigateTo({
        url: `/pages/QueryTrainView/QueryTrainView?from=${encodeURIComponent(
          this.from
        )}&to=${encodeURIComponent(this.to)}&date=${encodeURIComponent(
          this.date
        )}`,
      });
    },
  },
};
</script>

<style scoped>
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-base);
  padding-bottom: var(--space-base);
}

.grid-item-text {
  margin-top: var(--space-ssm);
  font-size: 12px;
  white-space: nowrap;
}
</style>
